
<template>
  <div>
    <swiper style="width: 1080px" :slidesPerView="1" :spaceBetween="30" :loop="true" :centeredSlides="true"
      :autoplay="{ delay: 500, disableOnInteraction: false }" :navigation="true" :modules="modules">
      <swiper-slide>
        <div v-for="v in 3" :key="v" style="float: left;">
          <img width="360" src="../assets/TIM.jpg" alt="" />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div v-for="v in 3" :key="v" style="float: left;">
          <img width="360" src="../assets/TIM.jpg" alt="" />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div v-for="v in 3" :key="v" style="float: left;">
          <img width="360" src="../assets/TIM.jpg" alt="" />
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';
import 'swiper/css/scrollbar';
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
const modules = [Navigation, Pagination, Scrollbar, A11y]



</script>

<style lang="less" scoped>
/deep/.swiper-button-next {
  position: absolute;
  width: 44px;
  border-radius: 50%;
  background-color: aliceblue;
}

/deep/.swiper-button-prev {
  position: absolute;
  width: 44px;
  border-radius: 50%;
  background-color: aliceblue;
}

/deep/.swiper-button-next::after {
  content: url(../assets/vue.svg);
}

/deep/.swiper-button-prev::after {
  content: url(../assets/vue.svg);
}
</style>
